<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" >
	<head th:replace="common :: head(~{::title})">
		<title>博客详情</title>
	</head>
	<body>
		<!-- 导航 -->
		<nav th:replace="common :: menu(1)"></nav>

		<!-- 中间内容 -->
		<div class="m-container-small m-padded-tb-big">
			<div class="ui container">
				<div class="ui top attached segment">
					<!-- 头部区域 -->
					<div class="ui horizontal link list">
						<div class="item">
							<img src="https://picsum.photos/seed/picsum/100/100" alt="" class="ui avatar image" th:src="@{${blog.user.avatar}}"  />
							<div class="content"><a href="#" class="header" th:text="${blog.user.nickname}">王先生</a></div>
						</div>
						<div class="item">
							<i class="calendar icon"></i><span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">20250401</span>
						</div>
						<div class="item">
							<i class="eye icon"></i><span th:text="${blog.views}">234</span>
						</div>
					</div>
					
				</div>
				
				<div class="ui  attached segment">
					<!-- 图片区域 -->
					<img src="https://picsum.photos/id/235/200/100" alt="" th:src="@{${blog.firstPicture}}" class="ui fluid rounded image" />
				</div>
				
				<div class="ui  attached padded segment">
					<!-- 主要内容区域 -->
					<div class="ui right aligned basic segment">
						<div class="ui orange basic label" th:text="${blog.flag}">原创</div>
					</div>
					
					<h2 class="ui center aligned header" th:text="${blog.title}">文章标题</h2>
					
					<!-- 文章内容 typo typo-selection排版插件样式-->
					<div id="content" class="typo typo-selection m-padded-lr-reponsive m-padded-tb-large" th:utext="${blog.content}">
						<p>文章，1984年6月26日出生于陕西省西安市，中国内地男演员及导演 [2-3]。</p>
						<h2>1</h2>
						<p>文章上中学时，就被挑选出演一部青春片《青春正点》，成为当时的童星 [1]。</p>
						<h2>2</h2>
						<p>2002年成功地考入中央戏剧学院表演系。就读期间，文章在电视剧《与青春有关的日子》中，饰演卓越，开始在影视圈崭露头角。</p>
					</div>
					<!-- 标签 -->
					<div class="m-padded-lr-reponsive">
						<div class="ui basic teal left pointing label" th:each="tag : ${blog.tags}" th:text="${tag.name}">方法论</div>
					</div>
					
					<!-- 赞赏 -->
					<div th:if="${blog.appreciation}">
						<div class="ui center aligned basic segment">
							<button id="payButton" class="ui orange basic circular button">赞赏</button>
						</div>

						<div class="ui payQr flowing popup transition hidden">
							<div class="ui orange basic label">
								<div class="ui images" style="font-size: inherit !important;">
									<div class="image">
										<img src="static/images/wechat.png" th:src="@{/images/wechat.png}" alt="" class="ui rounded bordered image" style="width: 120px;" />
										<div>微信</div>
									</div>
									<div class="image">
										<img src="static/images/wechat.png" th:src="@{/images/wechat.png}" alt="" class="ui rounded bordered image" style="width: 120px;"  />
										<div>支付宝</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<div class="ui attached positive message" th:if="${blog.shareStatement}">
					<!-- 博客信息 -->
					<div class="ui middle aligned grid">
						<div class="eleven wide column">
							<ui class="list">
								<li>作者:<span th:text="${blog.user.nickname}">小王</span><a href="#" th:href="@{/about}" target="_blank">(联系作者)</a></li>
								<li>发表时间:<span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd HH:mm')}">2017-10-0209:08</span></li>
								<li>版权声明:自由转载·非商用-非衍生-保持署名(创意共享3.0许可证)。</li>
								<li>公众号转载:请在文末添加作者公众号二维码</li>
							</ui>
						</div>
						<div class="five wide column">
							<img src="../static/images/wechat.png" th:src="@{/images/wechat.png}" alt="" class="ui right floated rounded border image" style="width: 110px;" />
						</div>
					</div>
				</div>
				
				<div class="ui bottom attached segment" th:if="${blog.commentabled}">
					<!-- 留言区域列表 -->
					<div id="comment-container" class="ui teal segment">
						<div th:fragment="commentList">
							<div class="ui comments" style="max-width: 100%">
								<h3 class="ui dividing header">评论</h3>
								<div class="comment" th:each="comment : ${comments}">
									<a class="avatar">
										<img src="https://picsum.photos/seed/picsum/800/450" th:src="@{${comment.avatar}}">
									</a>
									<div class="content">
										<a class="author">
											<span th:text="${comment.nickname}">Matt</span>
											<div class="ui mini basic teal left pointing label m-padded-mini" th:if="${comment.adminComment}">博主</div>
										</a>
										<div class="metadata">
											<span class="date" th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm')}">今天下午 5:42</span>
										</div>
										<div class="text" th:text="${comment.content}">太有艺术感了！</div>
										<div class="actions">
											<a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}" onclick="reply(this)">回复</a>
										</div>
									</div>
									<!--这里是嵌套的-->
									<div class="comments" th:if="${#arrays.length(comment.replyComments)}>0">   <!--判断大于0，才显示这块区域-->
										<div class="comment" th:each="reply : ${comment.replyComments}">    <!--评论子类-->
											<a class="avatar">
												<img src="https://picsum.photos/id/1014/100/100" th:src="@{${reply.avatar}}">
											</a>
											<div class="content">
												<a class="author" >
													<span th:text="${reply.nickname}">小红</span>&nbsp;
													<div class="ui mini basic teal left pointing label m-padded-mini"  th:if="${reply.adminComment}">博主</div>
													<span th:text="|@ ${reply.parentComment.nickname}|" class="m-teal">@ 小白</span>
												</a>
												<div class="metadata">
													<span class="date" th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
												</div>
												<div class="text" th:text="${reply.content}">
													This has been very useful for my research. Thanks as well!
												</div>
												<div class="actions">
													<a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}" onclick="reply(this)">回复</a>
												</div>
											</div>
										</div>
									</div>

								</div>

								<!--/*-->
								<div class="comment">
									<a class="avatar">
										<img src="https://picsum.photos/seed/picsum/800/450">
									</a>
									<div class="content">
										<a class="author">Elliot Fu</a>
										<div class="metadata">
											<span class="date">昨天凌晨 12:30</span>
										</div>
										<div class="text">
											<p>这对我来说非常有用。谢谢！</p>
										</div>
										<div class="actions">
											<a class="reply">回复</a>
										</div>
									</div>
									<div class="comments">
										<div class="comment">
											<a class="avatar">
												<img src="https://picsum.photos/seed/picsum/800/450">
											</a>
											<div class="content">
												<a class="author">Jenny Hess</a>
												<div class="metadata">
													<span class="date">刚刚</span>
												</div>
												<div class="text">Elliot，你总是那么正确：）</div>
												<div class="actions">
													<a class="reply">回复</a>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="comment">
									<a class="avatar">
										<img src="https://picsum.photos/seed/picsum/800/450">
									</a>
									<div class="content">
										<a class="author">Joe Henderson</a>
										<div class="metadata">
											<span class="date">5 天前</span>
										</div>
										<div class="text">老兄，这太棒了。非常感谢</div>
										<div class="actions">
											<a class="reply">回复</a>
										</div>
									</div>
								</div>
								<!--*/-->
							</div>

						</div>

					</div>
					
					<!-- 留言提交区 -->
					<div id="comment-form" class="ui form">
						<input type="hidden" name="blog.id" th:value="${blog.id}"/>
						<input type="hidden" name="parentComment.id" value="-1"/>
						<div class="required field">
							<textarea name="content" placeholder="请输入评论信息..."></textarea>
						</div>
						<div class="fields">
							<div class="required field m-mobile-wide m-margin-bottom-small">
								<div class="ui left icon input">
									<i class="user icon"></i>
									<input type="text" name="nickname" placeholder="姓名"  th:value="${session.user}!=null ? ${session.user.nickname}"/>
								</div>
							</div>
							<div class="required field m-mobile-wide m-margin-bottom-small">
								<div class="ui left icon input">
									<i class="mail icon"></i>
									<input type="text" name="email" placeholder="邮箱" th:value="${session.user}!=null ? ${session.user.email}"/>
								</div>
							</div>
							
							<div class="field m-mobile-wide m-margin-bottom-small">
								<button id="commnetpost-btn" type="button" class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布</button>
							</div>
							
						</div>
					</div>
				</div>
				
			</div>
		</div>

		<!-- 底部footer -->
		<footer th:replace="common :: footer"></footer>

		<th:block th:replace="common :: script"></th:block>

	<script th:inline="javascript">
		$('#payButton').popup({
			popup : $('.payQr.popup'),
			on : 'click',
			position: 'bottom center'
		});

		// 表单验证
		$('.ui.form').form({
			fields: {
				title: {
					identifier:'content',
					rules: [{
						type: 'empty',
						prompt: '请输入评论内容'
					}]
				}
			},
			fields: {
				title: {
					identifier:'nickname',
					rules: [{
						type: 'empty',
						prompt: '请输入您的名字'
					}]
				}
			},
			fields: {
				title: {
					identifier:'email',
					rules: [{
						type: 'empty',
						prompt: '请填写正确的邮箱地址'
					}]
				}
			}
		});

		$(function () {
			$("#comment-container").load(/*[[@{/comments/{id}(id=${blog.id})}]]*/"comments/1");
		});

		$('#commnetpost-btn').click(function () {
			var boo = $('.ui.form').form('validate form');
			if (boo){
				postData();
				console.log("校验成功")
			}else {
				console.log("校验失败")
			}
		});

		function postData() {
			$("#comment-container").load(/*[[@{/comments}]]*/"/comments",{
				"parentComment.id" : $("[name='parentComment.id']").val(),
				"blog.id" : $("[name='blog.id']").val(),
				"nickname" : $("[name='nickname']").val(),
				"email" : $("[name='email']").val(),
				"content" : $("[name='content']").val()
			}, function (responseTxt, statusTxt, xhr) {
				clearContent();
			});
		}
		
		function clearContent() {
			$("[name='content']").val('');
			$("[name='parentComment.id']").val(-1);
			$("[name='content']").attr("placeholder", "请输入评论信息...");
		}

		function reply(obj){
			var commentId = $(obj).data('commentid');
			var commentNickname = $(obj).data('commentnickname');
			$("[name='content']").attr("placeholder", "@"+commentNickname).focus();
			$("[name='parentComment.id']").val(commentId);
		}

	</script>
	</body>
</html>